// 1 导入相关包
// import React from 'react'; // 创建react 元素的
import ReactDOM from 'react-dom/client'; //渲染 react 元素的
// 引入css
import './index.css';

// 渲染根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 列表渲染：列表，和渲染
// 列表数据
let books1 = ['React', 'Vue', 'Angular'];
// let books2 = [<h1>React</h1>, <h1>Vue</h1>, <h1>Angular</h1>];

// // 列表渲染就是把js数据数组转化成一个产品需要的jsx数组 => map
// let books3 = books1.map((item, index) => {
//   return <h1 key={index}>{item}</h1>;
// });
// // UI
// const jsxElem = <div>{books3}</div>;
// 你经常看到的直接在jsx中的写法
const jsxElem = (
  <div>
    {books1.map((item, index) => (
      <h1 key={index}>{item}</h1>
    ))}
  </div>
);

// 渲染
root.render(jsxElem);
